<!-- <template>
	<view class="container">
				
				<view class="example">
						<uni-forms ref="baseForm" :modelValue="baseFormData">
							<uni-forms-item label="账号" required>
								<uni-easyinput v-model="baseFormData.mobile" placeholder="请输入账号" />
							</uni-forms-item>
							<uni-forms-item label="密码" required>
								<uni-easyinput v-model="baseFormData.password" placeholder="请输入密码" />
							</uni-forms-item>
						</uni-forms>	
						<button type="primary" @click="login">登录</button>
						
				</view>
		
	</view>
	
	
</template>

<script setup>

import {apiLogin,apiGetMember,apiGetBuyCourse} from '../../apis/login.js'  
	
	const baseFormData=ref({
		mobile:"13419843050",
		password:"123456"
	})



    const login=async ()=>{
		let res=await apiLogin(baseFormData.value);
		 if(res.data.code==200){
			uni.setStorageSync("token",res.data.data);
			uni.showToast({
				title:"登录成功",
				icon:"success"
			})
			getMember()
			getBuyCourse()
			setTimeout(()=>{
			uni.switchTab({
			   url: '../index/index'
			});
			},300)
		}else{
			uni.showToast({
				title:res.msg,
				icon:"error"
			})
		}
		
		
	}
	
	const member=ref()
	  
	const getMember=async ()=>{
	  	let res=await apiGetMember()
	  	member.value=res.data.data
	  	uni.setStorageSync("member",member.value)
	  	console.log("======会员信息==========")
	  	console.log(member.value);
	}
	const buyCourses=ref([])
	const getBuyCourse=async ()=>{
		let res=await apiGetBuyCourse()
			console.log("======已购课程==========")
			console.log(res.data.data);
			buyCourses.value=res.data.data
			let courseIds=buyCourses.value.map(item=>item.courseId)
			console.log(courseIds);
			console.log("========================");
			uni.setStorageSync("BuyCourses",courseIds)
			
	}  
	
</script>

<style lang="scss" scoped>
	
	.container{
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100vh;
		   
			background:
			linear-gradient(to bottom,transparent,#B0E0E6 100% ),
			linear-gradient(to right,#FF4500,#8B00FF,#1E90FF);
			min-height: 80vh;
		}
		.example {
			padding: 15px;
			
			//background-color: #fff;
		}
	
		.segmented-control {
			margin-bottom: 15px;
		}
	
		.button-group {
			margin-top: 15px;
			display: flex;
			justify-content: space-around;
		}
	
		.form-item {
			display: flex;
			align-items: center;
		}
	
		.button {
			display: flex;
			align-items: center;
			height: 35px;
			margin-left: 10px;
		}
</style> -->


<template>
	<view class="container">

		<view class="example">

			<uni-forms ref="baseForm" :modelValue="baseFormData">

				<uni-forms-item label="账号" required style="color: black;">
					<uni-easyinput class="login-input" v-model="baseFormData.mobile" 
						placeholder="请输入账号" />
				</uni-forms-item>

				<uni-forms-item label="密码" required>
					<uni-easyinput class="login-input" type="password" v-model="baseFormData.password" 
						placeholder="请输入密码" />
				</uni-forms-item>

			</uni-forms>

			<button class="login-button" @click="login">登录</button>

			<view class="anotherLogin">
				<!-- <view class="">
					没有账号？
				</view> -->

				<view class="gotophone" @click="goTophone">
					>>>手机验证码登录
				</view>

			</view>

		</view>

	</view>


</template>

<script setup>
	import {
		apiLogin,
		apiGetMember,
		apiGetBuyCourse,
		apiGetAllCourseCollection
	} from '../../apis/login.js'


	const baseFormData = ref({
		mobile: "15903003776",
		password: "123456"
	})


	const login = async () => {
		let res = await apiLogin(baseFormData.value);
		if (res.data.code == 200) {
			uni.setStorageSync("token", res.data.data);
			uni.showToast({
				title: "登录成功",
				icon: "success"
			})
			getMember()
			getBuyCourse()
			setTimeout(()=>{
				uni.switchTab({
					url: '../index/index'
				});
			},200)
			
		} else {
			uni.showToast({
				title: res.msg,
				icon: "error"
			})
		}
	}


	const member = ref()


	const getMember = async () => {
		let res = await apiGetMember()
		member.value = res.data.data
		uni.setStorageSync("member", member.value)
		getAllCourseCollection(res.data.data.id)
		
		console.log("======会员信息==========")
		console.log(member.value);
	}


	const buyCourses = ref([])


	const getBuyCourse = async () => {
		let res = await apiGetBuyCourse()
		console.log("======已购课程==========")
		console.log(res.data.data);
		buyCourses.value = res.data.data
		let courseIds = buyCourses.value.map(item => item.courseId)
		console.log(courseIds);
		console.log("========================");
		uni.setStorageSync("BuyCourses", courseIds)
	}

	const goTophone = () => {
		uni.navigateTo({
			url: '/pages/phoneLogin/phoneLogin'
		});
	}
	
	const getAllCourseCollection=async(id)=>{
		let res=await apiGetAllCourseCollection(id)
		var collections=res.data.data
		
	    console.log("===============获取收藏的课程========================");
		console.log(collections);
		if(collections){
			collections=res.data.data.map(item=>item.courseId)
		
			uni.setStorageSync("collection", collections)
			console.log("收藏课程",collections)
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
		padding: 10px;
		background:
			linear-gradient(to bottom, transparent, #cfffcb),
			linear-gradient(to right,#beecd8,#F4E2D8);
		min-height: 80vh;
	}


	.example {
		padding: 15px;
		background-color: rgba(245, 251, 255, 0.4);
		border-radius: 8px;
		box-shadow: 0 4px 5px rgba(234, 243, 254, 0.6);
		//background-color: #fff;
	}


	.segmented-control {
		margin-bottom: 15px;
	}


	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}


	.form-item {
		display: flex;
		align-items: center;
	}


	.login-button {
		color: #FFFFFF;
		font-size: 20px;
		width: 400rpx;
		height: 80rpx;
		// background-color: #3b96dc;
		background:
			linear-gradient(to right, #FF4500, #8B00FF, #1E90FF, );
		border-radius: 50rpx;
		line-height: 80rpx;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		color: #ffffff;
		margin-bottom: 20px;
	}


	.anotherLogin {
		display: flex;
		color: #0000ff;
		text-decoration: underline;
		font-size: 12px;
		justify-content: flex-end;
		/* 使内容在容器中右对齐 */
	}
</style>
